<div class="content-page">
    <mat-card>
        <mat-card-header>
            <mat-toolbar class="toolbar">
                <span>Morse Code（莫尔斯电码）</span>
                <span class="toolbar-spacer"></span>
                <mat-button-toggle-group [(ngModel)]="flagForButtonToggle" (change)="handleText()">
                    <mat-button-toggle value="ENCODE" class="toolbar-button-toggle" color="primary">
                    Encode
                    </mat-button-toggle>
                    <mat-button-toggle value="DECODE" class="toolbar-button-toggle" color="accent">
                    Decode
                    </mat-button-toggle>
                </mat-button-toggle-group>
            </mat-toolbar>
        </mat-card-header>
        <mat-card-content>

            <div class="option-row">
                <mat-form-field style="width: 120px">
                    <input matInput type="text" [(ngModel)]="optDashFormat" (keyup)="handleText()" name="optDashFormat" placeholder="Dash Format"
                    />
                </mat-form-field>
                <mat-form-field style="margin-left:20px; width: 120px">
                    <input matInput type="text" [(ngModel)]="optDotFormat" (keyup)="handleText()" name="optDotFormat" placeholder="Dot Format"
                    />
                </mat-form-field>
                <mat-form-field style="margin-left:20px; width: 120px">
                    <input matInput type="text" [(ngModel)]="optLetterDelim" (keyup)="handleText()" name="optLetterDelim" placeholder="Letter delimiter"
                    />
                </mat-form-field>
                <mat-form-field style="margin-left:20px; width: 120px">
                    <input matInput type="text" [(ngModel)]="optWordDelim" (keyup)="handleText()" name="optWordDelim" placeholder="Word delimiter"
                    />
                </mat-form-field>
            </div>
            <div class="tow-cols">
                <div>
                    <app-text-editor class="app-text-editor" #txtText1 (onValueChanged)="handleText()" value=""></app-text-editor>
                </div>
                <div>
                    <app-text-editor class="app-text-editor" #txtText2 syncMenu="true" (onValueSynced)="syncText()" value=""></app-text-editor>
                </div>
            </div>
        </mat-card-content>
    </mat-card>

</div>